import { useState } from "react";
import type { ButtonShape, ButtonStatus, ButtonVariant } from "@/components/Button";
import Button from "@/components/Button";
import Checkbox from "@/components/Checkbox";
import Filter from "@/components/Filter";
import Panel from "@/components/Panel";

const stats: ButtonStatus[] = [
  "neutral",
  "primary",
  "secondary",
  "accent",
  "info",
  "success",
  "warning",
  "error",
];

const variants: ButtonVariant[] = ["outline", "dash", "ghost", "link", "soft"];

const shapes: ButtonShape[] = ["circle", "square"];

const sizes: Size[] = ["xs", "sm", "md", "lg", "xl"];
export default function Buttons() {
  const [btnStatus, setBtnStatus] = useState<ButtonStatus | undefined>();
  const [btnVariant, setBtnVariant] = useState<ButtonVariant | undefined>();
  const [btnSize, setBtnSize] = useState<Size | undefined>();
  const [btnShape, setBtnShape] = useState<ButtonShape | undefined>();

  const [btnBlock, setBtnBlock] = useState(false);
  const [btnWide, setBtnWide] = useState(false);
  const [btnDisabled, setBtnDisabled] = useState(false);
  const [btnActive, setBtnActive] = useState(false);

  return (
    <Panel title="Buttons" className="bg-white">
      <div className="flex flex-col gap-4">
        <div className="gap-2 inline-flex items-center">
          Status:
          <Filter
            value={btnStatus}
            status="info"
            size="sm"
            options={stats.map((v) => ({ label: v, value: v }))}
            onChange={(v) => setBtnStatus(v as ButtonStatus)}
          />
        </div>
        <div className="gap-2 inline-flex items-center">
          Variant:
          <Filter
            value={btnVariant}
            status="info"
            size="sm"
            options={variants.map((v) => ({ label: v, value: v }))}
            onChange={(v) => setBtnVariant(v as ButtonVariant)}
          />
        </div>
        <div className="gap-2 inline-flex items-center">
          Shape:
          <Filter
            value={btnShape}
            status="info"
            size="sm"
            options={shapes.map((v) => ({ label: v, value: v }))}
            onChange={(v) => setBtnShape((v || "md") as ButtonShape)}
          />
        </div>
        <div className="gap-2 inline-flex items-center">
          Size:
          <Filter
            value={btnSize}
            status="info"
            size="sm"
            options={sizes.map((v) => ({ label: v, value: v }))}
            onChange={(v) => setBtnSize(v as Size)}
          />
        </div>
        <div className="gap-2 inline-flex items-center">
          Block: <Checkbox checked={btnBlock} onChange={(e) => setBtnBlock(e.target.checked)} />
        </div>
        <div className="gap-2 inline-flex items-center">
          Wide: <Checkbox checked={btnWide} onChange={(e) => setBtnWide(e.target.checked)} />
        </div>
        <div className="gap-2 inline-flex items-center">
          Disabled:
          <Checkbox checked={btnDisabled} onChange={(e) => setBtnDisabled(e.target.checked)} />
        </div>
        <div className="gap-2 inline-flex items-center">
          Active: <Checkbox checked={btnActive} onChange={(e) => setBtnActive(e.target.checked)} />
        </div>
        <div>
          <Button
            status={btnStatus}
            variant={btnVariant}
            shape={btnShape}
            size={btnSize}
            active={btnActive}
            disabled={btnDisabled}
            block={btnBlock}
            wide={btnWide}
          >
            Button
          </Button>
        </div>
      </div>
    </Panel>
  );
}
